<template>
  <div class="add-good-container">
    <!-- 标题 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="page-title">
          <i class="el-icon-goods"></i>
          <span>添加商品</span>
        </div>
      </el-col>
    </el-row>

    <!-- 表单内容 -->
    <el-form 
      ref="form" 
      :model="form" 
      :rules="rules" 
      label-width="120px" 
      class="good-form"
    >
      <!-- 基本信息 -->
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="card-header">
          <i class="el-icon-info"></i>
          <span>基本信息</span>
        </div>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入商品名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品货号" prop="code">
              <el-input v-model="form.code" placeholder="请输入商品货号" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="商品分类" prop="category">
              <el-select v-model="form.category" placeholder="请选择商品分类" style="width: 100%" clearable>
                <el-option label="分类一" value="1"></el-option>
                <el-option label="分类二" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品品牌" prop="brand">
              <el-select v-model="form.brand" placeholder="请选择商品品牌" style="width: 100%" clearable>
                <el-option label="品牌一" value="1"></el-option>
                <el-option label="品牌二" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 商品图片 -->
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="card-header">
          <i class="el-icon-picture"></i>
          <span>商品图片</span>
        </div>
        <el-form-item label="商品主图" prop="image">
          <div class="image-preview">
            <img :src="form.image" alt="商品图片" class="preview-image">
          </div>
          <el-button type="primary" size="small" @click="changeImage" icon="el-icon-refresh">更换图片</el-button>
        </el-form-item>
      </el-card>

      <!-- 价格库存 -->
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="card-header">
          <i class="el-icon-money"></i>
          <span>价格库存</span>
        </div>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="商品价格" prop="price">
              <el-input-number 
                v-model="form.price" 
                :precision="2" 
                :step="0.1" 
                :min="0"
                controls-position="right"
                style="width: 100%">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品库存" prop="stock">
              <el-input-number 
                v-model="form.stock" 
                :min="0" 
                :step="1"
                controls-position="right"
                style="width: 100%">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 商品描述 -->
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="card-header">
          <i class="el-icon-edit"></i>
          <span>商品描述</span>
        </div>
        <el-form-item label="商品描述" prop="description">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入商品描述"
            v-model="form.description"
            resize="none">
          </el-input>
        </el-form-item>
      </el-card>

      <!-- 提交按钮 -->
      <el-form-item class="form-buttons">
        <el-button type="primary" @click="submitForm" :loading="loading" icon="el-icon-check">立即创建</el-button>
        <el-button @click="resetForm" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addGood } from '@/api/goods';

export default {
  data() {
    return {
      form: {
        name: '',
        code: '',
        category: '',
        brand: '',
        price: 0,
        stock: 0,
        description: '',
        image: 'https://picsum.photos/170/280?random=1'
      },
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入商品货号', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]+$/, message: '货号只能包含字母和数字', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ],
        brand: [
          { required: true, message: '请选择商品品牌', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { type: 'number', min: 0, message: '价格必须大于0', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '请输入商品库存', trigger: 'blur' },
          { type: 'integer', min: 0, message: '库存必须为整数且大于等于0', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    async submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          try {
            const res = await addGood(this.form);
            console.log(res);
            if (res.status === 204 || res.code === 200) {
              this.$message({
                message: '商品添加成功',
                type: 'success'
              });
              this.resetForm();
              this.$bus.$emit('refreshGoodsList');
              this.$router.push('/home/goodsList');
            } else {
              this.$message.error(res.message || '添加商品失败');
            }
          } catch (error) {
            if (error.response && error.response.status === 204) {
              this.$message({
                message: '商品添加成功',
                type: 'success'
              });
              this.resetForm();
              this.$router.push('/home/goodsList');
            } else {
              this.$message.error(error.message || '添加商品失败');
            }
          } finally {
            this.loading = false;
          }
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.form.image = 'https://picsum.photos/170/280?random=1';
    },
    changeImage() {
      this.form.image = `https://picsum.photos/170/280?random=${Math.random()}`;
    }
  }
}
</script>

<style scoped>
.add-good-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.page-title {
  background: #fff;
  padding: 15px 20px;
  font-weight: bold;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  display: flex;
  align-items: center;
}
.page-title i {
  margin-right: 10px;
  font-size: 20px;
  color: #409EFF;
}
.good-form {
  margin-top: 20px;
}
.box-card {
  margin-bottom: 20px;
  border-radius: 4px;
}
.card-header {
  font-weight: bold;
  display: flex;
  align-items: center;
}
.card-header i {
  margin-right: 10px;
  color: #409EFF;
}
.image-preview {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
}
.preview-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  transition: all 0.3s;
}
.preview-image:hover {
  transform: scale(1.02);
}
.form-buttons {
  text-align: center;
  margin-top: 30px;
}
.form-buttons .el-button {
  padding: 12px 30px;
  font-size: 14px;
}
.el-form-item {
  margin-bottom: 22px;
}
.el-input-number {
  width: 100%;
}
</style>
